<template>
<!-- 首页 -->
  <div id="Count" class="Count">
    <div class="count" style="background-color: #f0ad4e">
      <a @click="goUser">
        <h4>{{this.count.userCount}}</h4>
        <p>
          <i class="el-icon-user"></i> 用户总数
        </p>
      </a>
    </div>
    <div class="count" style="background-color: #5cb85c">
      <a @click="goShop">
        <h4>{{this.count.productCount}}</h4>
        <p>
          <i class="el-icon-s-operation"></i> 商品总数
        </p>
      </a>
    </div>
    <div class="count" style="background-color: #4cb1cf">
      <a @click="goOrder">
        <h4>{{this.count.orderCount}}</h4>
        <p>
          <i class="el-icon-finished"></i> 订单总数
        </p>
      </a>
    </div>
  </div>
</template>

<script>
import { Homecount } from "@/request/http";

export default {
  props: {},
  name: "Count",
  data() {
    return {
      count: [],
    };
  },
  created() {},
  computed: {},
  components: {},
  methods: {
    // 跳转到用户列表
    goUser() {
      this.$router.push("/user");
    },
    goShop() {
      this.$router.push("/shop");
    },
    goOrder() {
      this.$router.push("/order");
    },
  },
  mounted() {
    // 页面进入时加载内容
    Homecount.then((data) => {
      if (data.data.status == 0) {
        this.count = data.data.data;
        // console.log(data);
      }
    });
  },
  watch: {},
};
</script>
<style scoped lang="scss">
@media screen and (min-width: 950px) {
  .count {
    width: 32%;
    position: relative;
    float: left;
    min-height: 1px;
    a {
      padding: 150px 0;
      height: 200px;
      text-align: center;
      display: block;
      opacity: 0.8;
      color: #ffffff;
      h4 {
        font-size: 50px;
        height: 80px;
        line-height: 80px;
      }
      p {
        font-size: 18px;
      }
    }
  }
}
.count {
  height: 400px;
  position: relative;
  min-height: 1px;
  padding-right: 5px;
  padding-left: 5px;

  a {
    padding: 140px 0;
    height: 160px;
    text-align: center;
    display: block;
    opacity: 0.9;
    color: #ffffff;
    h4 {
      font-size: 50px;
      height: 80px;
      line-height: 80px;
    }
    p {
      font-size: 18px;
    }
  }
}
.count:hover {
  transform: scale(0.9);
  transition: 1s;
  color: #000000;
  a {
    color: #222222;
  }
}
</style>